<template>
  <div>
    <h1 style="text-align: center">支付宝沙箱</h1>
    <div style="width: 70%;margin: 15px auto">
      <el-form label-position="left" :model="payForm" ref="payForm">
        <el-form-item label="价格" label-width="80px" prop="price"
                      :rules="[{required:true,message:'请输入商品价格',trigger:'blur'},{type:'number',message:'价格必须为数字类型'}]">
          <el-input v-model.number="payForm.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" label-width="80px" prop="productName"
                      :rules="[{required:true,message:'请输入商品名称',trigger:'blur'}]">
          <el-input v-model="payForm.productName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="sendRequest" style="width: 100%">支 付</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "ALiPay",
  data() {
    return {
      payForm: {
        price: '',
        productName: ''
      },
    }
  },
  methods: {
    sendRequest() {
      this.$refs['payForm'].validate(valid => {
        if (valid) {
          this.$axios.post('/other/aLiPay', this.$qs.stringify(this.payForm)).then(res => {
            if (res.code === 200) {
              const div = document.createElement('div');
              div.innerHTML = (res.data.data);
              document.body.appendChild(div);
              document.forms[1].submit();
            }
          });
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
